<template>

	<div class="cljk-bottom">
		<el-tabs v-model="activeName" @tab-click="handleClick" size="mini">
			<el-tab-pane label="轨迹列表" name="first" lazy>
				<gjlb :nodes.sync="nodes" :curDay.sync="curDay" :bottomHeight.sync="bottomHeight"
					:sourceTableData.sync="sourceTableData" :curIndex.sync="curIndex" />
			</el-tab-pane>
			<el-tab-pane label="停车列表" name="second" lazy>
				<tclb :nodes.sync="nodes" :curDay.sync="curDay" :curHour.sync="curHour" :bottomHeight.sync="bottomHeight" @tc-load="loadTc"/>
			</el-tab-pane>
			<el-tab-pane label="轨迹曲线" name="third" lazy>
				<gjqx :nodes.sync="nodes" :curDay.sync="curDay" :bottomHeight.sync="bottomHeight" :sourceTableData.sync="sourceTableData" />
			</el-tab-pane>
		</el-tabs>
	</div>


</template>

<script>
	import gjlb from './gjlb-table.vue'
	import tclb from './tclb-table.vue'
	import gjqx from './gjqx-chart.vue'
	export default {

		components: {
			'gjlb': gjlb,
			'tclb': tclb,
			'gjqx': gjqx
		},

		props: {
			nodes: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
			sourceTableData: {
				type: Array,
				default: function() {
					return {};
				},
				required: true
			},
			curDay: {
				type: Object,
				default: function() {
					return null;
				},
				required: true
			},
			curHour: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
			curIndex: {
				type: Number,
				default: function() {
					return 0;
				},
				required: true
			},
			bottomHeight: {
				type: String,
				default: function() {
					return 37 + 'vh';
				},
				required: true
			}
		},
		watch: {
			nodes: function(val) {}
		},
		name: 'bottomContent',

		data() {

			return {
				activeName: 'first'
			}

		},
		
		methods:{
			loadTc(p){
				this.$emit('load-tc',p)
			}
		}
	}
</script>

<style>
</style>